<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="fragment/head"/>
    <link href="resources/assets/global/plugins/datatables/datatables.min.css" rel="stylesheet"/>
    <link href="resources/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet"/>
    <link href="resources/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css" rel="stylesheet"/>
</head>

<body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-content-white page-sidebar-closed">
<th:block th:with="
    ERPConstants = ${T(com.sh.caryr.erp.util.ERPConstants)} ,
    authTarget = ${ERPConstants.AUTH_TARGET_PRODUCT} ,
    layout = ${T(com.sh.caryr.erp.custmz.LayoutContainer).getLayout(authTarget, session.user)},
    createAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_CREATE},
    deleteAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_DELETE},
    updateAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_UPDATE}
">
    <th:block th:replace="fragment/header"/>
    <!-- BEGIN CONTAINER -->
    <div class="page-container">
        <!-- BEGIN SIDEBAR -->
        <th:block th:replace="fragment/sidebar"/>
        <!-- BEGIN CONTENT -->
        <div class="page-content-wrapper">
            <!-- BEGIN CONTENT BODY -->
            <div class="page-content">
                <!-- BEGIN PAGE BAR -->
                <div class="page-bar">
                    <ul class="page-breadcrumb">
                        <li><a href="dashboard" class='msg_home'>控制台</a> <i class="fa fa-circle"></i></li>
                        <li><span class='msg_title_product'>产品管理</span></li>
                    </ul>
                </div>
                <div class="row">
                    <!-- BEGIN ===========page level content============= -->
                    <div class="col-md-12">
                        <!-- BEGIN Error Message -->
                        <div class="alert alert-danger hidden" id="form_error_msg">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
                            <strong class="msg_err_title"></strong>
                            <span class="msg_err_subTitle"> </span>
                        </div>

                        <div class="tabbable-line">
                            <ul class="nav nav-tabs myTab">
                                <li class="active" id='tab_li_entity_list'>
                                    <a href="#tab_entity_list" data-toggle="tab">产品列表</a>
                                </li>
                                <li id='tab_li_entity_detail' class='disabled'>
                                    <a href="#tab_entity_detail" data-toggle="tab" class='msg_detailTitle'>详细信息</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <!-- BEGIN list tab -->
                                <div class="tab-pane active fontawesome-demo" id="tab_entity_list">
                                    <div class='row'>
                                        <div class="col-md-12">
                                            <!-- BEGIN data table-->
                                            <div class="portlet box green datatable-portlet">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="fa fa-list"></i><span class='msg_listTitle'>列表</span>
                                                    </div>
                                                    <div class="tools">
                                                        <th:block
                                                                th:if="${ session.isSuperUser||session.authStr.contains(createAuth)}">
                                                            <button id="btn_add_entity" class="btn sbold green"
                                                                    title="创建产品">
                                                                <i class="fa fa-plus"></i>
                                                            </button>
                                                            <button id="btn_copy2sku" class="btn sbold green"
                                                                    title="生成SKU">
                                                                <i class="fas fa-random"></i>
                                                            </button>
                                                        </th:block>
                                                        <button th:if="${ session.isSuperUser||session.authStr.contains(deleteAuth)}"
                                                                id="btn_del_entity" class="btn sbold green" title="删除">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                        <button id="btn_refresh_dt" class="btn sbold green" title="刷新">
                                                            <i class="fas fa-sync"></i>
                                                        </button>
                                                        <div class="btn-group">
                                                            <a class="btn btn-sm green" href="javascript:;"
                                                               data-toggle="dropdown" title="其他">
                                                                <i class="fas fa-ellipsis-h"></i>
                                                            </a>
                                                            <ul class="dropdown-menu pull-right" role="menu">
                                                                <li>
                                                                    <a href="javascript:;" id="btn_expand_collapse_all"
                                                                       data-current-expand="false">
                                                                        <i class="fas fa-chevron-up"></i>
                                                                        <i class="fas fa-chevron-down"></i>展开/收起
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="portlet-body">
                                                    <table class="table table-striped table-hover table-bordered dt-responsive"
                                                           id="dt_product" cellspacing="0" width="100%">
                                                        <thead>
                                                        <tr>
                                                            <th width="2%">
                                                                <label
                                                                        class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                                                    <input type="checkbox" class="group-checkable"
                                                                           data-set="#dt_product .checkboxes"/>
                                                                    <span></span>
                                                                </label></th>
                                                            <th width='' class='msg_ent_fld_img'></th>
                                                            <th width='' class='msg_ent_fld_name'></th>
                                                            <th width='' class='msg_ent_fld_code'></th>
                                                            <th width='' class='msg_ent_fld_type'></th>
                                                            <th width='' class='msg_ent_fld_status'></th>
                                                            <th width='' class='msg_product_field_salePrice'></th>
                                                            <th width="2%"></th>
                                                            <th width="2%"></th>
                                                        </tr>
                                                        </thead>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- BEGIN side filter bar-->
                                        <div class="hidden col-md-2 mt-element-list">
                                            <div class="mt-list-head list-simple ext-1 font-white bg-yellow-crusta">
                                                <div class="list-head-title-container">
                                                    <h3 class="list-title text-center">店铺</h3>
                                                </div>
                                            </div>
                                            <div class="mt-list-container list-simple ext-1">
                                                <ul>
                                                    <li class="mt-list-item">
                                                        <div class="list-datetime"> 0</div>
                                                        <div class="list-item-content">
                                                            <h3 class="uppercase">
                                                                <a href="javascript:;">Opening soon..</a>
                                                            </h3>
                                                        </div>
                                                    </li>
                                                    <li class="mt-list-item">
                                                        <div class="list-datetime"> 0</div>
                                                        <div class="list-item-content">
                                                            <h3 class="uppercase">
                                                                <a href="javascript:;">Opening soon..</a>
                                                            </h3>
                                                        </div>
                                                    </li>
                                                    <li class="mt-list-item done">
                                                        <div class="list-datetime"> 0</div>
                                                        <div class="list-item-content">
                                                            <h3 class="uppercase">
                                                                <a href="javascript:;">Opening soon..</a>
                                                            </h3>
                                                        </div>
                                                    </li>
                                                    <li class="mt-list-item">
                                                        <div class="list-datetime"> 0</div>
                                                        <div class="list-item-content">
                                                            <h3 class="uppercase">
                                                                <a href="javascript:;">Opening soon..</a>
                                                            </h3>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <!-- END side filter bar-->
                                    </div>
                                </div>
                                <!-- END list tab -->
                                <!-- BEGIN detail tab -->
                                <div class="tab-pane" id="tab_entity_detail">
                                    <div class="portlet box blue">
                                        <div class="portlet-title">
                                            <div class="caption">
                                                <i class="fa fa-file-text-o"></i>产品信息
                                            </div>
                                            <div class="tools"></div>
                                        </div>
                                        <div class="portlet-body">
                                            <div class="tabbable-custom nav-justified">
                                                <ul class="nav nav-tabs nav-justified">
                                                    <li id="tab_li_prodcut_basic" class="active">
                                                        <a href="#tab_prodcut_basic" data-toggle="tab"> 基本信息 </a>
                                                    </li>
                                                    <li id="tab_li_prodcut_spec">
                                                        <a href="#tab_prodcut_spec" data-toggle="tab"> 规格信息 </a>
                                                    </li>
                                                </ul>
                                                <div class="tab-content">
                                                    <div id="tab_prodcut_basic" class="tab-pane active">
                                                        <!-- BEGIN FORM-->
                                                        <form class="form-horizontal" role="form" id='product_edit_form'
                                                              action='api/product' method='post'>
                                                            <div class="form-body">
                                                                <div class='row edit_data'>
                                                                    <input class="hidden" name='id' id='input_edit_form_id'>
                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group '>
                                                                        <label class="col-md-4 control-label caryr-required">产品类型</label>
                                                                        <div class="col-md-6">
                                                                            <div class="mt-radio-inline">
                                                                                <label class="mt-radio active">
                                                                                    <input type="radio" name="type"
                                                                                           data-compare-value='value'
                                                                                           value="0" checked="checked"/>
                                                                                    <i class="radio-label msg_ent_fld_protype_normal"></i>
                                                                                    <span></span>
                                                                                </label>
                                                                                <label class="mt-radio">
                                                                                    <input type="radio" name="type"
                                                                                           data-compare-value='value'
                                                                                           value="1"/>
                                                                                    <i class="radio-label msg_ent_fld_protype_set"></i>
                                                                                    <span></span>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-4 control-label msg_product_field_name caryr-required'></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='text' class='form-control'
                                                                                       name='name'
                                                                                       maxlength="30"
                                                                                       id='input_edit_form_name'
                                                                                       data-valid-required
                                                                                >
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-4 control-label msg_product_field_code caryr-required'></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='text' class='form-control'
                                                                                       name='code'
                                                                                       maxlength="30"
                                                                                       id='input_edit_form_code'
                                                                                       data-valid-required
                                                                                       placeholder=''>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label
                                                                                class='col-md-4 control-label msg_product_field_serialNo'></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='text' class='form-control'
                                                                                       maxlength="30"
                                                                                       name='serialNo'
                                                                                       id='input_edit_form_serialNo'
                                                                                       placeholder=''>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-4 control-label msg_product_field_brand'></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='text' class='form-control'
                                                                                       name='brand' maxlength="30"
                                                                                       id='input_edit_form_brand'
                                                                                       placeholder=''>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-4 control-label msg_product_field_category'></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='text' class='form-control'
                                                                                       maxlength="30"
                                                                                       name='category'
                                                                                       id='input_edit_form_category'
                                                                                       placeholder=''>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group '>
                                                                        <label class="col-md-4 control-label caryr-required">状态</label>
                                                                        <div class="col-md-4">
                                                                            <div class="mt-radio-inline">
                                                                                <label class="mt-radio active">
                                                                                    <input type="radio" name="status"
                                                                                           value="1" checked="checked"/>
                                                                                    <i class="radio-label msg_ent_fld_prostd_normal"></i>
                                                                                    <span></span>
                                                                                </label>
                                                                                <label class="mt-radio">
                                                                                    <input type="radio" name="status"
                                                                                           value="2"/>
                                                                                    <i class="radio-label msg_ent_fld_prostd_stop"></i>
                                                                                    <span></span>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-6 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-2 control-label msg_product_field_description'></label>
                                                                        <div class='col-md-5'>
                                                                            <div class='input-group'>
                                                                            <textarea class='form-control'
                                                                                      name='description'
                                                                                      maxlength="100"></textarea>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <h3 class="form-section">&nbsp;</h3>

                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-4 control-label msg_product_field_salePrice '></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='number'
                                                                                       class='form-control'
                                                                                       name='salePrice' maxlength="15"
                                                                                       id='input_edit_form_salePrice'
                                                                                       placeholder=''>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-4 control-label msg_product_field_purchasePrice'></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='number'
                                                                                       class='form-control'
                                                                                       name='purchasePrice'
                                                                                       maxlength="15"
                                                                                       id='input_edit_form_purchasePrice'
                                                                                       placeholder=''>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-4 control-label msg_product_field_costPrice'></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='number'
                                                                                       class='form-control'
                                                                                       name='costPrice' maxlength="15"
                                                                                       id='input_edit_form_costPrice'
                                                                                       placeholder=''>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-4 control-label msg_product_field_supplyPrice'></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='number'
                                                                                       class='form-control'
                                                                                       name='supplyPrice' maxlength="15"
                                                                                       id='input_edit_form_supplyPrice'
                                                                                       placeholder=''>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <h3 class="form-section">&nbsp;</h3>

                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-4 control-label msg_product_field_length'></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='number'
                                                                                       class='form-control'
                                                                                       name='length' maxlength="10"
                                                                                       id='input_edit_form_length'
                                                                                       placeholder=''>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-4 control-label msg_product_field_width'></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='number'
                                                                                       class='form-control'
                                                                                       name='width' maxlength="10"
                                                                                       id='input_edit_form_width'
                                                                                       placeholder=''>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-4 control-label msg_product_field_height'></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='number'
                                                                                       class='form-control'
                                                                                       name='height' maxlength="10"
                                                                                       id='input_edit_form_height'
                                                                                       placeholder=''>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-4 control-label msg_product_field_grossWeight'></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='number'
                                                                                       class='form-control'
                                                                                       name='grossWeight' maxlength="10"
                                                                                       id='input_edit_form_grossWeight'
                                                                                       placeholder=''>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-4 control-label msg_product_field_netWeight'></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='number'
                                                                                       class='form-control'
                                                                                       name='netWeight' maxlength="10"
                                                                                       id='input_edit_form_netWeight'
                                                                                       placeholder=''>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3 col-sm-6 col-xs-12 has-success form-group'>
                                                                        <label class='col-md-4 control-label msg_product_field_packaging'></label>
                                                                        <div class='col-md-6'>
                                                                            <div class='input-group'>
                                                                                <input type='text' class='form-control'
                                                                                       name='packaging' maxlength="30"
                                                                                       id='input_edit_form_packaging'
                                                                                       placeholder=''>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </form>
                                                    </div>
                                                    <div id="tab_prodcut_spec" class="tab-pane ">
                                                        <div class="col-lg-12 col-xs-12 col-sm-12">
                                                            <div class="portlet tasks-widget" id="product_spec_list">
                                                                <input class="hidden" name="productType">
                                                                <div class="portlet-title">
                                                                    <div class="actions">
                                                                        <a href="javascript:;"
                                                                           class="add_task btn btn-sm btn-circle green">
                                                                            <i class="fa fa-plus"></i> 添加
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                                <div class="portlet-body">
                                                                    <div class="task-content">
                                                                        <div class="scroller scroll-list"
                                                                             data-always-visible="1"
                                                                             data-rail-visible1="1">
                                                                            <!-- START TASK LIST -->
                                                                            <ul class="task-list">
                                                                                <li class="list-header">
                                                                                    <div class="task-checkbox">
                                                                                        <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                                                                            <input type="checkbox"
                                                                                                   class="checkboxes select_item"
                                                                                                   value="1">
                                                                                            <span></span>
                                                                                        </label>
                                                                                    </div>
                                                                                    <div class="task-title row">
                                                                                        <div class="row">
                                                                                            <div class="col-md-3">
                                                                                                <span class="col-md-2 msg_ent_fld_img"> 图片 </span>
                                                                                                <span class="col-md-5 msg_ent_fld_dem_name"> 规格名称 </span>
                                                                                                <span class="col-md-5 msg_ent_fld_dem_code"> 规格编码 </span>
                                                                                            </div>
                                                                                            <div class="col-md-3">
                                                                                                <span class="col-md-4 msg_ent_fld_attr1"> 属性1 </span>
                                                                                                <span class="col-md-4 msg_ent_fld_attr2"> 属性2 </span>
                                                                                                <span class="col-md-4 msg_ent_fld_attr3"> 属性3 </span>
                                                                                            </div>
                                                                                            <div class="col-md-2">
                                                                                                <span class="col-md-6 msg_ent_fld_sale_price"> 销售价 </span>
                                                                                                <span class="col-md-6 msg_ent_fld_purchase_price"> 采购价 </span>
                                                                                            </div>
                                                                                            <div class="col-md-3 normal-product-related">
                                                                                                <span class="col-md-9"> SKU </span>
                                                                                                <span class="col-md-3"> 生成SKU </span>
                                                                                            </div>
                                                                                        </div>

                                                                                    </div>
                                                                                </li>
                                                                                <li class="tempalte hidden ">
                                                                                    <input class="hidden" name="id">
                                                                                    <span class="hidden hiddenModel"></span>
                                                                                    <div class="task-checkbox">
                                                                                        <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                                                                            <input type="checkbox"
                                                                                                   class="checkboxes select_item"
                                                                                                   value="1">
                                                                                            <span></span>
                                                                                        </label>
                                                                                    </div>
                                                                                    <div class="task-value row">
                                                                                        <div class="col-md-3">
                                                                                            <div class="col-md-2">
                                                                                                <img src='images/empty-product-img.png'
                                                                                                     class="dt-img">
                                                                                            </div>
                                                                                            <div class="input-wrap col-md-5">
                                                                                                <input type="text"
                                                                                                       class="form-control"
                                                                                                       name="name"
                                                                                                       data-valid-required>
                                                                                            </div>
                                                                                            <div class="input-wrap col-md-5">
                                                                                                <input type="text"
                                                                                                       class="form-control"
                                                                                                       name="code"
                                                                                                       data-valid-required>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-md-3">
                                                                                            <div class="input-wrap col-md-4">
                                                                                                <input type="text"
                                                                                                       class="form-control"
                                                                                                       name="attribute1"
                                                                                                       data-valid-required>
                                                                                            </div>
                                                                                            <div class="input-wrap col-md-4">
                                                                                                <input type="text"
                                                                                                       class="form-control"
                                                                                                       name="attribute2"
                                                                                                       data-valid-required>
                                                                                            </div>
                                                                                            <div class="input-wrap col-md-4">
                                                                                                <input type="text"
                                                                                                       class="form-control"
                                                                                                       name="attribute3">
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-md-2">
                                                                                            <div class="input-wrap col-md-6">
                                                                                                <input type="number"
                                                                                                       class="form-control"
                                                                                                       name="salePrice"
                                                                                                       data-valid-required>
                                                                                            </div>
                                                                                            <div class="input-wrap col-md-6">
                                                                                                <input type="number"
                                                                                                       class="form-control"
                                                                                                       name="purchasePrice">
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-md-3 normal-product-related">
                                                                                            <div class="input-wrap col-md-9">
                                                                                                <select class="form-control sel_sku"
                                                                                                        name="skuId"></select>
                                                                                            </div>
                                                                                            <div class="col-md-3">
                                                                                                <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                                                                                    <input type="checkbox"
                                                                                                           name="createSku"
                                                                                                           class="checkboxes"
                                                                                                           value="1">
                                                                                                    <span></span>
                                                                                                </label>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-md-1 mt-action-buttons">
                                                                                            <a href="javascript:;"
                                                                                               class="view_comb_list btn btn-icon-only green"
                                                                                               title="套件组合">
                                                                                                <i class="fa fa-pencil"></i>
                                                                                            </a>
                                                                                            <a href="javascript:;"
                                                                                               class="delete_task btn btn-icon-only red"
                                                                                               title="删除">
                                                                                                <i class="fa fa-trash"></i>
                                                                                            </a>
                                                                                        </div>
                                                                                    </div>
                                                                                </li>
                                                                            </ul>
                                                                            <!-- END START TASK LIST -->
                                                                        </div>
                                                                    </div>
                                                                    <div class="task-footer">&nbsp;</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-actions">
                                                        <div class="row text-center">
                                                            <div class="col-md-12">
                                                                <button type="button"
                                                                        class="btn btn-warning msg_com_formSaveAndNew"
                                                                        id="btn_edit_form_save_and_new">Save & New
                                                                </button>
                                                                <button type="button" class="btn green msg_com_formSave"
                                                                        id="btn_edit_form_save">Save
                                                                </button>
                                                                <button type="button"
                                                                        class="btn grey-salsa btn-outline msg_com_formReturn"
                                                                        id="btn_edit_form_return">Return
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- END detail tab -->
                            </div>
                        </div>
                    </div>

                    <!--======== Expand detail template ========-->
                    <div id="exp_detail_temp" class="tab-pane hidden ">
                        <div class="portlet tasks-widget">
                            <input class="hidden" name="productType">
                            <div class="portlet-body">
                                <div class="task-content">
                                    <!-- START TASK LIST -->
                                    <ul class="task-list">
                                        <li class="list-header">
                                            <div class="task-title row">
                                                <div class="col-md-4">
                                                    <span class="col-md-offset-1  col-md-2 msg_ent_fld_img"> 图片 </span>
                                                    <span class="col-md-5 msg_ent_fld_dem_name"> 规格名称 </span>
                                                    <span class="col-md-4 msg_ent_fld_dem_code"> 规格编码 </span>
                                                </div>
                                                <div class="col-md-4">
                                                    <span class="col-md-4 msg_ent_fld_attr1"> 属性1 </span>
                                                    <span class="col-md-4 msg_ent_fld_attr2"> 属性2 </span>
                                                    <span class="col-md-4 msg_ent_fld_attr3"> 属性3 </span>
                                                </div>
                                                <div class="col-md-4">
                                                    <span class="col-md-4 msg_ent_fld_sale_price"> 销售价 </span>
                                                    <span class="col-md-8"> SKU </span>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="tempalte hidden ">
                                            <input class="hidden" name="id">
                                            <span class="hidden hiddenModel"></span>
                                            <div class="task-value row">
                                                <div class="col-md-4">
                                                    <div class="col-md-offset-1 col-md-2">
                                                        <img src='images/empty-product-img.png'
                                                             name="img"
                                                             class="dt-img">
                                                    </div>
                                                    <div class="input-wrap col-md-5">
                                                        <input type="text"
                                                               class="form-control"
                                                               name="name"
                                                               data-valid-required>
                                                    </div>
                                                    <div class="input-wrap col-md-4">
                                                        <input type="text"
                                                               class="form-control"
                                                               name="code"
                                                               data-valid-required>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="input-wrap col-md-4">
                                                        <input type="text"
                                                               class="form-control"
                                                               name="attribute1"
                                                               data-valid-required>
                                                    </div>
                                                    <div class="input-wrap col-md-4">
                                                        <input type="text"
                                                               class="form-control"
                                                               name="attribute2"
                                                               data-valid-required>
                                                    </div>
                                                    <div class="input-wrap col-md-4">
                                                        <input type="text"
                                                               class="form-control"
                                                               name="attribute3">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="input-wrap col-md-4">
                                                        <input class="form-control" name="salePrice">
                                                    </div>
                                                    <div class="input-wrap col-md-8">
                                                        <input class="form-control" name="skuId">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- BEGIN modal: comb list -->
                    <div id="combDetailModal" class="formModal modal fade" tabindex="-1"
                         role="basic" style="display: none;">
                        <div class="modal-dialog large-modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-hidden="true"></button>
                                    <h4 class="modal-title">套件组合</h4>
                                </div>
                                <div class="portlet tasks-widget" id="product_comb_item_list">
                                    <div class="portlet-title">
                                        <div class="actions">
                                            <a href="javascript:;" class="add_task btn btn-sm btn-circle green">
                                                <i class="fa fa-plus"></i> 添加
                                            </a>
                                        </div>
                                    </div>
                                    <div class="portlet-body">
                                        <div class="task-content">
                                            <div class="scroller scroll-list" data-always-visible="1"
                                                 data-rail-visible1="1">
                                                <input class="hidden" id="task_data_index">
                                                <!-- START TASK LIST -->
                                                <ul class="task-list">
                                                    <li class="list-header">
                                                        <div class="task-title row">
                                                            <div class="row">
                                                                <div class="col-md-11">
                                                                    <span class="col-md-2 msg_ent_fld_img"> 图片 </span>
                                                                    <span class="col-md-6"> 商品名称 </span>
                                                                    <span class="col-md-3"> 组合比例 </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="tempalte hidden ">
                                                        <input class="hidden" name="id">
                                                        <div class="task-value row">
                                                            <div class="col-md-11">
                                                                <div class="col-md-2">
                                                                    <img src='images/empty-product-img.png'
                                                                         class="dt-img">
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <select class="form-control sel_sku"
                                                                            name="skuId"></select>
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <input type="number" class="form-control"
                                                                           name="skuNum" value="1">
                                                                </div>
                                                            </div>
                                                            <div class="mt-action-buttons ">
                                                                <a href="javascript:;"
                                                                   class="delete_task btn btn-icon-only red" title="删除">
                                                                    <i class="fa fa-trash"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="task-footer">&nbsp;</div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <a class=" btn green btn-outline bold msg_com_formSave" data-dismiss="modal"></a>
                                    <a class=" btn grey-salsa btn-outline bold msg_com_formCancel"
                                       data-dismiss="modal"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block th:replace="fragment/rear"/>
    <!-- BEGIN Page level plugins -->
    <script src="resources/assets/global/plugins/datatables/datatables.min.js"></script>
    <script src="resources/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js"></script>
    <script src="resources/assets/global/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
    <script src="resources/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <script src="resources/assets/caryr/caryr.datatable.js"></script>
    <script th:inline="javascript">
        jQuery(document).ready(function () {

            /*[+
            caryr.lang = [[${session.lang}]];
            var disableModify = ('true'==[[${session.isSuperUser||session.authStr.contains(updateAuth)?'false':'true'}]]);
            +]*/

            var tableId = '#dt_product',
                formId = '#product_edit_form';
            /************ Get Reference object list***/
            function fatchRef() {
                caryr.fetchRefList({
                    replace: true,
                    refSelect: [$('.sel_sku')],
                    textFormat: '2',
                    url: 'api/sku'
                });
            }
            /************ Attach Expand Detail Event ***/

            $('#btn_expand_collapse_all').on('click', function () {
                App.blockUI({
                    boxed: true,
                    message: $.i18n.prop("msg_loading")
                });
                var expand = $(this).attr('data-current-expand') == "false" ? true : false;
                $(this).attr('data-current-expand', expand ? true : false);
                $('.btn_expand_detail').each(function (i, e) {
                    expandDetail($(e), expand);
                });
                App.unblockUI();
            });

            function attachExpandDetail() {
                $('.btn_expand_detail').on('click', function () {
                    var icon = $(this).find('i.fas');
                    var expand = icon.hasClass('fa-chevron-down');
                    expandDetail($(this), expand);
                });
            }
            /***************** Data table **************/
            var dataTable = caryr.dataTable.create({
                url: "api/product",
                defaultOrderBy: 3,
                tableId: tableId,
                lang: caryr.lang,
                draw: function () {
                    fatchRef();
                    attachExpandDetail();
                },
                columns: [
                    {
                        data: 'img',
                        "orderable": false,
                        render: function (e, n) {
                            if (!e) {
                                e = 'images/empty-product-img.png'
                            }
                            return '<img src=' + e + ' class="dt-img">'
                        }
                    },
                    {data: 'name'},
                    {data: 'code'},
                    {
                        data: 'type',
                        render: function (e) {
                            if (e == '0') {
                                return "<span class='msg_ent_fld_protype_normal'></span>";
                            } else {
                                return "<span class='msg_ent_fld_protype_set'></span>";
                            }
                        }
                    },
                    {
                        data: 'status', render: function (e) {
                        if (e == '1') {
                            return "<span class='msg_ent_fld_prostd_normal'></span>";
                        } else {
                            return "<span class='msg_ent_fld_prostd_stop'></span>";
                        }
                    }
                    },
                    {data: 'salePrice'},
                    {
                        data: 'id',
                        orderable: false,
                        render: function (id) {
                            var html = '<a class="blue btn_expand_detail" href="javascript:;" title="展开/收起" data-id="' + id + '"><i class="fas fa-chevron-down"></i></a>';
                            return html;
                        }
                    }
                ],
                onViewEvent: function (data) {
                    caryr.refreshEditForm(data, false, formId);
                    onProductTypeChange();
                    specTaskPortlet.refreshData(data.productSpecList);
                    caryr.showTab('#tab_li_entity_detail');
                    caryr.showTab('#tab_li_prodcut_basic');
                    productTypeEditable(false); //Product type cannot change
                }
            });

            //Attach create product
            $('#btn_add_entity').on('click', function () {
                caryr.refreshEditForm({}, true, formId);
                onProductTypeChange();
                caryr.showTab('#tab_li_entity_detail');
                caryr.showTab('#tab_li_prodcut_basic');
                productTypeEditable(true);
                specTaskPortlet.clear();
            });

            //Attach event: generate sku
            $('#btn_copy2sku').on('click', function () {
                var ids = caryr.dataTable.selectedIds(dataTable);
                if (!ids) {
                    return;
                }
                var url = "api/productSpec/genSku/" + caryr.ids2UrlParam(ids);
                caryr.confirm({
                    title: "确定要生成SKU吗？",
                    onConfirm: function () {
                        caryr.ajaxReq({
                            url: url,
                            type: "POST",
                            successMsgRender: function (response) {
                                var count = response && response.data && response.data.length ? response.data.length : 0;
                                return $.i18n.prop("msg_api_succ_gen_sku_count", count);
                            }
                        });
                    }
                });
            });

            /***************** Edit form **************/
            var productForm = caryr.getFormInstatnce('product_edit_form', {
                disabled: disableModify,
                url: 'api/product',
                validateForm: function (formResult, form) {
                    var result = formResult;
                    if (!formResult) {
                        caryr.showTab('#tab_li_prodcut_basic');
                        return false;
                    }
                    //Check spec
                    var productType = form.find('input[name="type"]:checked').val();
                    var specs = specTaskPortlet.collectData();
                    var erroSubTitle = 'msg_form_err_no_dimen';
                    if (!specs || specs.length == 0) {
                        result = false;
                    }
                    //Check spec for Set Product
                    if (result && productType == "1") {
                        for (var i = 0; i < specs.length; i++) {
                            var combNum = specs[i].hiddenModel;
                            if (!combNum || combNum.length == 0) {
                                erroSubTitle = 'msg_form_err_dimen_no_sku';
                                result = false;
                            }
                        }
                    }
                    //Show or Hide error message
                    if (result) {
                        caryr.toggleErrorMessage({show: false});
                    } else {
                        caryr.toggleErrorMessage({
                            show: true,
                            title: 'msg_form_err',
                            subTitle: erroSubTitle
                        });
                        caryr.showTab('#tab_li_prodcut_spec');
                    }
                    return result;
                },
                afterSaveSuccess: function (data, action) {
                    var id = action == "POST" ? data.data : data.data.id;
                    if (id) {
                        this.form.find('.edit_data input[name="id"]').val(id);
                        dataTable.draw();
                        caryr.showTab('#tab_li_entity_list');
                    } else {
                        swal({
                            title: $.i18n.prop("msg_com_systemError"),
                            text: "",
                            type: "error"
                        });
                    }
                },
                afterSaveAndNewSuccess: function (data, action) {
                    this.form.find('.edit_data input[name="id"]').val("");
                    dataTable.draw();
                },
                afterCollectEntityData: function (entity) {
                    var productSpecList = specTaskPortlet.collectData();    //Collect specs
                    for (var i = 0; i < productSpecList.length; i++) {
                        if (entity.type == 0 && productSpecList[i].createSku) {     //Create new SKU
                            var sku = {};
                            caryr.copyEntity(productSpecList[i], sku);
                            delete productSpecList[i].skuId;
                            delete sku.skuId;
                            productSpecList[i].sku = sku;
                        }
                        if (productSpecList[i].skuId == "0") {
                            delete productSpecList[i].skuId;
                        }
                        if (entity.type == 1) {     //Collect combNumList
                            productSpecList[i].combNumList = productSpecList[i].hiddenModel;
                        }
                    }
                    entity.productSpecList = productSpecList;
                }
            });

            //Attach cancel
            $('#btn_edit_form_return').on('click', function () {
                caryr.refreshEditForm({}, false);
                onProductTypeChange();
                caryr.showTab('#tab_li_entity_list');
            });

            //Attach product type radio button
            $('input[type="radio"][name="type"]').on('change', function () {
                onProductTypeChange();
            });

            /************ Task Portlet ************/
            var specTaskPortlet = caryr.createTaskPortlet({
                portlet: $('#product_spec_list'),
                disabled: disableModify,
                beforeAddTaskItem: function (entity) {
                    var product = productForm.collectEntityData();
                    if (!entity.id) { //new product spec
                        entity.name = product.name;
                        entity.code = product.code;
                        entity.salePrice = product.salePrice;
                        entity.purchasePrice = product.purchasePrice;
                    } else {
                        if (entity.type == '1') {   //Product Set
                            entity.hiddenModel = entity.combNumList;
                        }
                    }
                },
                onAddTaskItem: function (entity, newLi) {
                    newLi.find('.view_comb_list').on('click', function () {
                        var li = $(this).closest('li');
                        var data_index = li.attr('data-index');
                        $('#task_data_index').val(data_index);
                        var jsonStr = li.find('span.hiddenModel').html();
                        var jsonObj = {};
                        if (jsonStr) {
                            jsonObj = $.parseJSON(jsonStr);
                        }
                        combItemTaskPortlet.refreshData(jsonObj);
                        $('#combDetailModal').modal('show');
                    });
                }
            });

            var combItemTaskPortlet = caryr.createTaskPortlet({
                disabled: disableModify,
                portlet: $('#product_comb_item_list')
            });

            $('#combDetailModal .msg_com_formSave').click('on', function () {
                var taskList = combItemTaskPortlet.collectData();
                var jsonStr = JSON.stringify(taskList);
                var data_index = $('#task_data_index').val();
                var li = $('#product_spec_list').find('li[data-index="' + data_index + '"]');
                li.find('span.hiddenModel').html(jsonStr);
            });

            /***************** Functions **************/
            //Switch comb list edit button base on Product type
            function onProductTypeChange() {
                var value = $('input[type="radio"][name="type"]:checked').val(); // 0 normal; 1 combiation
                if (value == 0) {
                    $('.view_comb_list').addClass('hidden');
                    $('.normal-product-related').removeClass('hidden');
                } else {
                    $('.view_comb_list').removeClass('hidden');
                    $('.normal-product-related').addClass('hidden');
                }
            }

            //Switch Product type editable
            function productTypeEditable(enable) {
                if (enable) {
                    $('input[type="radio"][name="type"]').attr('disabled', false);
                    $('input[type="radio"][name="type"]').closest('.mt-radio').removeClass(' mt-radio-disabled');
                } else {
                    $('input[type="radio"][name="type"]').closest('.mt-radio').addClass(' mt-radio-disabled');
                    $('input[type="radio"][name="type"]').attr('disabled', true);
                }
            }
            //Toggle Icon
            function toggleExpandIcon(icon, expand) {
                if (expand) {
                    icon.removeClass('fa-chevron-down');
                    icon.addClass('fa-chevron-up');
                } else {
                    icon.addClass('fa-chevron-down');
                    icon.removeClass('fa-chevron-up');
                }
            }
            //Render Entity Details
            function renderEntityDetails(row, entityId) {
                var templateId = 'exp_detail_' + entityId;
                var colspan = 9;
                //-- Load detail
                var listWidget = $('#exp_detail_temp').clone();
                listWidget.find('>div').attr('id', templateId);
                var html =
                    '<tr class="tr_expand">' +
                    '<td colspan="' + colspan + '">' +
                    listWidget.html() +
                    '</td>' +
                    '</tr>';
                row.after(html);

                //Load entity detail
                caryr.ajaxReq({
                    url: "api/product/" + entityId,
                    type: "GET",
                    skipMsg: true,
                    success: function (response) {
                        if (response && response.data && response.data.productSpecList) {
                            //-- Refresh list
                            caryr.createTaskPortlet({
                                portlet: $('#' + templateId),
                                disabled: true,
                                entities: response.data.productSpecList,
                                onAddTaskItem: function (entity, newLi) {
                                    if(entity.img){newLi.find('img[name="img"]').attr('src', entity.img);}
                                }
                            });
                        }
                    }
                });
            }

            //Expand or collapse details
            function expandDetail(a, expand) {
                var entityId = a.attr('data-id');
                var icon = a.find('i.fas');
                //-- Toggle Icon
                toggleExpandIcon(icon, expand);
                //-- Check if detail loaded
                var row = a.closest('tr');
                var nextEle = row.next();
                if (expand) {
                    if (nextEle && nextEle.hasClass('tr_expand')) {
                        nextEle.removeClass('hidden');
                        return;
                    } else {
                        renderEntityDetails(row, entityId);
                    }
                } else {
                    //-- Hidden Detail
                    if (nextEle && nextEle.hasClass('tr_expand')) {
                        nextEle.addClass('hidden');
                    }
                }
            }
        });
    </script>
</th:block>
</body>
</html>